<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://unpkg.com/vue@latest"></script>
  </head>
  <body>
    <div id="app">
      <h1 :class="textColor">Demo</h1>

      <select v-model="textColor">
        <option value="red-text">Red</option>
        <option value="blue-text">Blue</option>
      </select>

      <br />
      <button :disabled="btnDisable" @click="this.btnDisable = true">
        Click
      </button>
    </div>
  </body>

  <script>
    const app = {
      data() {
        return {
          textColor: "red-text",
          btnDisable: false,
        };
      },

      methods: {
        handleClick() {
          console.log("demo");
          this.btnDisable = true;
        },
      },
    };

    Vue.createApp(app).mount("#app");
  </script>
</html>
